<template>
  <div>

    <el-row>
      <div style="margin-top: 5px;display: flex;  align-items: center;justify-content: center">
        <el-badge class="badgeItem">
          <div style="margin-left: 20px">
            状态
          </div>
        </el-badge>
        <el-badge :value="total" class="badgeItem">
          <el-button style="width: 100px" round @click="selectSta(0)">全部</el-button>
        </el-badge>
        <el-badge :value="startNum" class="badgeItem">
          <el-button style="width: 100px" round @click="selectSta(1)">运行</el-button>
        </el-badge>
        <el-badge :value="stopNum" class="badgeItem">
          <el-button style="width: 100px" round @click="selectSta(2)">停机</el-button>
        </el-badge>
        <el-badge :value="onlineNum" class="badgeItem">
          <el-button style="width: 100px" round @click="selectSta(3)">离线</el-button>
        </el-badge>
        <div>
          开机率 {{ (total - onlineNum) / total * 100 + '%' }}
          织机数量 {{ total }}
        </div>
      </div>
    </el-row>

    <el-row>
      <div class="selectBody" style="margin: 10px 10px 0 10px">
        <el-form :model="queryParams" ref="queryForm" :inline="true" size="mini">
          <el-form-item label="机台编号" prop="devNum">
            <el-input
              placeholder="请输入机台编号"
              v-model="queryParams.devNum"
              clearable
            />
          </el-form-item>
          <el-form-item label="SN" prop="SN">
            <el-input
              placeholder="请输入SN"
              v-model="queryParams.devSn"
              clearable
            />
          </el-form-item>
          <!--          <el-form-item label="客户" prop="custom" >-->
          <!--            <el-select v-model="queryParams.cusId" placeholder="请选择客户">-->
          <!--              <el-option-->
          <!--                v-for="item in customers"-->
          <!--                :key="item.id"-->
          <!--                :label="item.nickName"-->
          <!--                :value="item.id">-->
          <!--              </el-option>-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->
          <el-form-item label="员工" prop="employee">
            <el-select v-model="queryParams.empId" placeholder="请选择员工" clearable>
              <el-option
                v-for="item in employees"
                :key="item.id"
                :label="item.nickName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-row>

    <div class="mainCon">
      <div v-for=" (item,index) in deviceList" class="singleInfo" @click="selectOneSn(item)">
        <div class="topBody">
          <div class="topOne">
            <div class="oneLeft">
              <img v-if="(item.status & 4) && item.isOnline===2" :src="run" style="height: 90px;width: 90px;">
              <img v-if="(!(item.status & 4) && item.isOnline===2)" :src="stop" style="height: 90px;width: 90px;">
              <img v-if="item.isOnline===1" :src="dev"
                   style="height: 90px;width: 90px;">
              <div class="topOne" style="border-radius: 10px;background-color: #d1dbe5;padding: 2px 0">
                {{ item.devNum }}
              </div>
            </div>
            <div class="oneRight">
              <div style="display: flex">
                <div class="colorbar" style="background-color: green"></div>
                <div>
                  <div style="font-size: 5px">{{ parseSpeed(item.devSpeed) }}</div>
                  <span class="opt">转速</span>
                </div>
              </div>
              <div>
                <div style="display: flex">
                  <div>
                    <div class="midbarRed" :style="'height:' +parseNo(item,item.setNum)+'%;'"></div>
                    <div class="midbarGreen" :style="'height:' +parseHas(item,item.nowNum)+'%;'"></div>
                  </div>
                  <div>
                    <div style="font-size: 5px">{{ parseNum(item.nowNum) }}</div>
                    <span class="opt">当前圈数</span>
                  </div>
                </div>
              </div>
              <div>
                <div style="display: flex">
                  <div class="colorbar" style="background-color: grey"></div>
                  <div>
                    <div style="font-size: 5px">{{ parseNum(item.setNum) }}</div>
                    <span class="opt">设定圈数</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="topTwo">
            <div class="mainCon">
              <div class="threeInfo" style="padding-left: 3px;">
                <div style="font-weight: bold">{{ item.devSn }}</div>
                <span style="color: grey">采集器编号</span>
              </div>
              <div class="threeInfo">
                <div style="font-weight: bold">{{ parseStatus(item) }}</div>
                <span class="opt">当前状态</span>
              </div>
            </div>
          </div>
        </div>
        <div class="bottomBody">
          <div class="bottomIfo">
            机型 -
          </div>
          <div class="bottomIfo">
            筒径 -
          </div>
          <div class="bottomIfo">
            针距 -
          </div>
          <div class="bottomIfo">
            针数 -
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {listDevice, getStaNum, usersToQuery} from '@/api/device/device'
import useUserStore from '@/store/modules/user';
import _ from 'lodash' ;

import devImg from '@/assets/images/dev.png';
import stopImg from '@/assets/images/devstop.png';
import runImg from '@/assets/images/devrun.png';

const userStore = useUserStore();



export default {
  data() {
    return {
      dev: devImg,
      stop: stopImg,
      run: runImg,
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 设备表格数据
      deviceList: [],
      nowStatus: 0,
      startNum: 0,
      stopNum: 0,
      onlineNum: 0,
      employees: [],
      customers: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        companyId: userStore.userId,
        devModel: null,
        isActive: null,
        isOnline: null,
        devNum: null,
        devSn: null,
        devSpeed: null,
        empId: null,
        cusId: null,
        runStatus: null
      },
    };
  },
  mounted() {
    // document.body.style.backgroundColor = "#f9f9f9";
    this.getList()
    this.getStaData()
    this.getUserList()
  },
  beforeDestroy() {
    // document.body.removeAttribute('style')
  },
  methods: {

    selectOneSn(item) {
      //跳到详情页面
      this.$router.push("/device/detail/id/" + item.deviceId)
    },
    handleQuery() {
      this.getList()
      // this.getStaData()
    },
    resetQuery() {
      this.queryParams.devNum = null
      this.queryParams.devSn = null
      this.queryParams.empId = null
      this.getList()
      this.getStaData()
    },
    getUserList() {
      usersToQuery({userType: 2}).then(res => {
        this.employees = res
      })
      // usersToQuery({userType:3}).then(res=>{
      //   this.customers = res
      // })
    },
    getList() {
      listDevice(this.queryParams).then(res => {
        this.deviceList = res.rows

      })
    },
    /** 选择机台状态*/
    selectSta(num) {
      this.nowStatus = num
      this.queryParams.runStatus = num;
      listDevice(this.queryParams).then(res => {
        this.deviceList = res.rows
      })
    },
    /**
     * 机台状态统计数据
     */
    getStaData() {
      let query = {
        companyId: userStore.userId,
      };
      getStaNum(this.queryParams).then((res) => {
        this.stopNum = res.stop;
        this.startNum = res.start;
        this.onlineNum = res.online;
        this.total = res.stop + res.start + res.online
      });
    },
    parseNum(item) {
      return _.parseInt(item, 16)
    },
    parseSpeed(item) {
      return _.parseInt(item, 16) / 10
    },
    parseNo(item, setNum) {
      return (_.parseInt(setNum, 16) - _.parseInt(item.nowNum, 16) % _.parseInt(setNum, 16)) * 100 / _.parseInt(setNum, 16)
    },
    parseHas(item, nowNum) {
      return (_.parseInt(nowNum, 16) % _.parseInt(item.setNum, 16)) * 100 / _.parseInt(item.setNum, 16)
    },
    parseStatus(item) {
      if (item.isOnline === 1) {
        return '离线'
      } else if (_.parseInt(item.status, 16) & 4) {
        return '运行'
      } else {
        return '停止'
      }
    }
  }
}

</script>

<style scoped>

</style>

<style>

.mainCon {
  margin-top: 5px;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

.threeInfo {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 5px;
  align-items: center;
  justify-content: center;
  margin: 5px auto;
}

.singleInfo {
  box-sizing: border-box;
  width: 12.5%;
  border: 1px solid gainsboro;
  border-radius: 8px;
  margin: 10px 10px 0 10px;
  background-color: #fff;
}

.singleInfo:hover {
  box-shadow: 0px 0px 5px #888888;
}

.topBody {

}

.topOne {
  display: flex;
  justify-content: center;
  align-items: center;
}

.oneLeft {
  margin: 0 auto;
}

.oneRight {
  width: 40%;
}

.topTwo {
  display: flex;
}

.bottomBody {
  padding-left: 10px;
  border-top: 1px solid gainsboro;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

.bottomIfo {
  width: 50%;
  margin: 3px auto;
  font-size: 5px
}

.opt {
  color: grey;
  font-size: 12px;
}

.colorbar {
  width: 4px;
  border-radius: 4px;
  margin: 2px 5px;
}

.midbarRed {
  width: 4px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  margin: 0 5px;
  background-color: red;
}

.midbarGreen {
  width: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  margin: 0 5px;
  background-color: green;
}

.badgeItem {
  margin-top: 10px;
  margin-right: 40px;
}

</style>
